/*
 * @Author: 张笑天
 * @Date: 2018-03-07 17:09:20
 * @Last Modified by: lyuan2018
 * @Last Modified time: 2020-08-19 15:38:49
 */
import React from 'react';
import { Row, Col } from 'antd';
import classNames from 'classnames';
import { WeaLocaleProvider } from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;

class Layout extends React.Component {
  static displayName = 'ListLayout';
  constructor(props) {
    super(props);
    this.prefixCls = 'wea-email-list-layout';
    this.state = {
      showRight: props.showRight,
    };
  }
  componentDidMount() {
    const { showRight } = this.props;
    /* eslint-disable */
    this.setState({ showRight });
    /* eslint-enable */
  }
  componentWillReceiveProps(nextPorps) {
    if (this.props.showRight !== nextPorps.showRight) {
      this.setState({ showRight: nextPorps.showRight });
    }
  }
  onCollapse = (e) => {
    const { onCollapse } = this.props;
    const { showRight } = this.state;
    this.setState({ showRight: !showRight });
    typeof onCollapse === 'function' && onCollapse(showRight);
    e.stopPropagation();
    e.preventDefault();
    e.nativeEvent.preventDefault();
  };
  render() {
    const { showRight } = this.state;
    const { className = '', children, leftCom, showBtn = true } = this.props;
    const btnCls = classNames({
      [`${this.prefixCls}-btn`]: true,
      [`${this.prefixCls}-btn-hide`]: !showRight,
      [`${this.prefixCls}-btn-show`]: showRight,
    });
    const leftCol = showRight
      ? { xs: 15, sm: 13, md: 11, lg: 9 }
      : { xs: 24, sm: 24, md: 24, lg: 24 };
    const rightCol = {
      xs: 24 - leftCol.xs,
      sm: 24 - leftCol.sm,
      md: 24 - leftCol.md,
      lg: 24 - leftCol.lg,
    };
    // 先保留自适应配置，增加定宽
    const leftStyle = showRight
      ? { width: 460, float: 'left', marginLeft: -460 }
      : { width: '100%' };
    const rightStyle = { width: showRight ? '100%' : 0 };
    const parentStyle = showRight ? { paddingLeft: 460 } : {};
    return (
      <Row
        ecId={`${(this && this.props && this.props.ecId) || ''}_Row@lw29bf`}
        className={`${this.prefixCls} ${className}`}
        style={parentStyle}
      >
        <Col
          ecId={`${(this && this.props && this.props.ecId) || ''}_Col@h6jf0p`}
          {...leftCol}
          className={`${this.prefixCls}-left`}
          style={leftStyle}
        >
          {leftCom}
          {showBtn && (
            <div
              className={btnCls}
              title={
                showRight
                  ? getLabel(384235, '展开列表')
                  : getLabel(384234, '收起列表')
              }
              onClick={this.onCollapse}
            />
          )}
        </Col>
        <Col
          ecId={`${(this && this.props && this.props.ecId) || ''}_Col@etruxt`}
          {...rightCol}
          className={`${this.prefixCls}-right`}
          style={rightStyle}
        >
          {children}
        </Col>
      </Row>
    );
  }
}

export default Layout;
